<template>
  <div>
    <div class="box">
      <div style="display: flex;justify-content: space-between;margin-bottom: 12px">
        <el-input v-model="search"
                  placeholder="请输入内容"
                  style="width: 250px;"
                  @change="fetchList">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button v-if="isAdmin" size="mini" type="primary" @click="add">发布</el-button>
      </div>
      <div class="list">
        <div v-for="item in dataList" :key="item" class="item">
          <span @click="openInfo(item)"> {{ item.noteTitle }}</span>
          <div style="display: flex;align-items: center;font-size: 12px">
            <div style="display: flex;align-items: center;">
              <img src="@/assets/img/time.png" style="width: 16px;">
              <span style="margin-left: 6px">{{ item.createTime }}</span>
            </div>
            <div v-if="isAdmin" style="display: flex;margin: 0 12px">
              <span style="color: #409EFF" @click="edit(item)">编辑</span>
              <span style="color:red;margin-left: 6px;" @click="del(item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <NoticeInfo ref="NoticeInfo"/>
    <add-edit ref="addEdit" @callBack="fetchList"/>
  </div>
</template>
<script>
import NoticeInfo from "./components/notice-info";
import addEdit from "./components/add-edit";
import {notedel, noteGetList} from "@/utils/notice";

export default {
  data() {
    return {search: undefined, dataList: []}
  },
  computed: {
    isAdmin() {
      const auth = JSON.parse(localStorage.getItem("auth") || '{}')
      return Number(auth.role.id) > 2
    }
  },
  methods: {
    async fetchList() {
      const res = await noteGetList({search: this.search})
      if (res.status === 'success') {
        this.dataList = res.data
      }
    },
    openInfo(record) {
      this.$refs.NoticeInfo.openByRecord({...record, title: record.noteTitle})
    },
    add() {
      this.$refs.addEdit.openByRecord({title: '发布'})
    },
    edit(record) {
      this.$refs.addEdit.openByRecord({...record, title: '编辑'})
    },
    async del(id) {
      const res = await notedel(id)
      if (res.status === 'success') {
        this.fetchList()
      }
    }
  },
  created() {
    this.fetchList()
  },
  components: {NoticeInfo, addEdit}
}
</script>
<style scoped>
.box {

}

.list {
  height: 80vh;
  overflow-y: scroll;
}

.item {
  border-bottom: #f5f5f5 solid 1px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 12px;
  cursor: pointer;

}

.time {
  font-size: 12px;
}
</style>